<template>
    <div id="id">
        <span>选择栏目</span>
        <Select v-model="model" style="width:200px;margin-left:10px;margin-right:10px">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <Button type="primary" @click="AddColumn">添加栏目</Button>
        <!-- 添加显示的模态框 -->
     <Modal
        v-model="modal1"
        :title="title"
        @on-ok="ok"
        @on-cancel="cancel">
        <div>
            <i-input :value.sync="value" placeholder="请输入..." ></i-input>
        </div>
    </Modal>
    <!-- 表格数据展示 -->
      <i-table :columns="columns1" :data="data1" style="margin-top:20px"></i-table>
      <!-- 分页 -->
      <Page :total="Total" style="margin-top:20px" :page-size="PageSize" @on-change="OnChange"  @on-page-size-change="OnPageSize" show-sizer></Page>
    </div>
</template>
<script>
export default {
  data () {
    return {
      cityList: [
        {
          value: 'New York',
          label: 'New York'
        }, {
          value: 'London',
          label: 'London'
        }, {
          value: 'Sydney',
          label: 'Sydney'
        }, {
          value: 'Ottawa',
          label: 'Ottawa'
        }, {
          value: 'Paris',
          label: 'Paris'
        }, {
          value: 'Canberra',
          label: 'Canberra'
        }
      ],
      modal1: false,
      model: '',
      Total: 100, // 总数量
      PageSize: 10, // 每页的条数
      title: '添加栏目', // 模态框标题设置
      value: '', // 栏目值
      columns1: [
        {
          title: '名称',
          key: 'name'
        },
        {
          title: '创建时间',
          key: 'createTime'
        },
        {
          title: '创建人',
          key: 'createRen'
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.SeeData(params)
                  }
                }
              }, '查看'),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.EditData(params)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.removeData(params)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      data1: [
        {
          name: 'vue',
          createTime: '2018-5-5',
          createRen: 'admin'
        },
        {
          name: 'javascript',
          createTime: '2018-6-5',
          createRen: 'admin'
        }
      ]
    }
  },
  methods: {
    ok () { // 点击确定
      if (this.value) {
        this.$Message.success('Clicked ok')
      } else {
        this.$Message.info('请输入栏目')
      }
    },
    cancel () { // 点击取消

    },
    AddColumn () {
      this.modal1 = true
    },
    SeeData (params) { // 查看
      console.log(params)
      this.modal1 = true
    },
    EditData () { // 编辑
      this.modal1 = true
    },
    removeData () { // 删除
      this.$Modal.confirm({
        title: '是否删除',
        // content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
        onOk: () => {
          this.$Message.success('删除成功')
        },
        onCancel: () => {
          this.$Message.info('取消删除')
        }
      })
    },
    OnChange (val) { // 分页展示
      console.log(当前的页数 + val)
    },
    OnPageSize (val) { // 点击分页,返回页面的条数
      console.log(每页 + val + '条')
    }
  }
}
</script>
<style lang="scss" scoped></style>
